<template>
	<view class="container">
		<!-- 内容区域 -->
		<scroll-view class="order-list" scroll-y>
			<!-- 加载状态 -->
			<view v-if="loading" class="loading">
			    <text>加载中...</text>
			</view>
			  
			<!-- 空状态 -->
			<view v-else-if="filteredOrders.length === 0" class="empty">
			    <image src="/static/images/empty-order.png" mode="aspectFit"></image>
				<text>暂无订单数据</text>
			</view>
			  
			<!-- 订单列表 -->
			<view v-for="order in filteredOrders" :key="order.use" class="order-item">
				<view class="order-content">
					<view class="order-details">
						<text class="order-title">{{ order.productName }}</text>
						<text class="order-info">成人 ¥{{ order.adultPrice }} x{{ order.adultCount }}，老人/学生 ¥{{ order.oldStuPrice }} x{{ order.oldStuCount }}</text>
						<text class="order-info">提交人：{{ order.userName }}</text>
						<text class="order-info">创建时间：{{ order.addTime }}</text>
						<view class="divider"></view>
						<view class="order-status">
							<text :class="statusText(order.state)" class="status-text">{{order.state}}</text>
							<text class="order-action" @click="navigateTo(order.state,order.id)">{{ actionText(order.state) }}</text>
						</view>
					</view>
					<image class="order-image" :src="order.imgUrl" mode="aspectFill" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState} from 'pinia'
import { useUserInfoStore} from '../../../stores/userInfo.js'
import {getOrdersById} from '../../../api/user.js'
export default {
	data() {
		return {
			tab: '',
			amount: 123.45, // 示例金额
			orders: [],
			order1:[],
			order2:[],
			loading:false
		};
	},
	onLoad(option){
		this.tab=option.tab;
		// console.log(this.tab)
		//根据参数设置页面标题
		let title = '全部订单';
		uni.setNavigationBarTitle({
			title: this.tab
		});
		this.getOrdersById()
	},
	computed: {
		...mapState(useUserInfoStore,['userId','phone','username','state']),
		filteredOrders() {  // 移除多余的 id
		  if(this.tab==='全部订单'){
		    return this.orders
		  }else{
		    return this.orders.filter(order => order.state===this.tab);
		  }
		}
	},
	onShow() {
		this.getOrdersById()
	},
	created() {
		this.getOrdersById()
	},
	methods: {
		async getOrdersById() {
		  try {
		    if(!this.userId) {
		      this.orders = []; // 未登录时清空订单
		      return;
		    }
		    
		    // 并行获取两种订单
		    const [touristRes, agentRes] = await Promise.all([
		      getOrdersById('tourist', this.userId),
		      this.state ? getOrdersById('agent', this.userId) : Promise.resolve({data: []})
		    ]);
		    
		    this.order1 = touristRes.data || [];
		    this.order2 = (agentRes && agentRes.data) || [];
		    
		    // 合并订单并过滤无效数据
		    this.orders = [...this.order1, ...this.order2].filter(Boolean);
		    
		  } catch (error) {
		    console.error('获取订单失败:', error);
		    uni.showToast({ title: '获取订单失败', icon: 'none' });
		    this.orders = [];
		  } finally {
				this.loading = false;
			}
		},
		setActiveTab(tab) {
			this.activeTab = tab;
		},
		statusText(status) {
			switch (status) {
				case '待确认':
					return 'confirmed';
				case '待签署':
					return 'signed';
				case '待支付':
					return 'paid';
				case '待出行':
					return 'ready';
				case '已完成':
					return 'completed';
				default:
					return '';
			}
		},
		actionText(status) {
			switch (status) {
			case '待确认':
				if(this.state&&((this.orders.userId===this.userId&&this.orders.agentId===this.id)||(this.orders.userId!=this.userId))){
					return '修改合同';
				}
				else{
					return '';
				}
				case '待签署':
					return '签署合同';
				case '待支付':
					return '支付订单';
				case '待出行':
					return '查看合同';
				case '已完成':
					return '查看合同';
				default:
					return '';
			}
		},
		navigateTo(page,oid) {
		  switch (page) {
			//确认合同/修改合同
			case '待确认':
			  if(this.state&&((this.orders.userId===this.userId&&this.orders.agentId===this.userId)||(this.orders.userId!=this.userId))){
			  	uni.navigateTo({
			  		url: '/pages/salesman/contract/editContract?oid='+oid
			  	});
			  }else{
			  	uni.navigateTo({
					url: '/pages/user/contract/confirmContract?oid='+oid
			  	});
			  }
			  break;
			//支付订单
			case '待支付':
			if(this.state&&((this.orders.userId===this.userId&&this.orders.agentId===this.userId)||(this.orders.userId!=this.userId))){
			 	uni.navigateTo({
			 		url: '/pages/user/PendingPayment/PendingPayment?orderId='+oid
			 	});
			 }else{
			 	uni.navigateTo({
			 		url: '/pages/user/PendingPayment/pay?amount=' + this.amount + '&orderId=' + oid
			 	});
			 }
			  break;
			case '待出行':
				uni.navigateTo({
				url: '/pages/user/contract/viewContract?orderId='+oid
				});
				break;
			case '已完成':
				uni.navigateTo({
				url: '/pages/user/contract/viewContract?orderId='+oid
				});
				break;	  
			//签署合同
			case '待签署':
			  uni.navigateTo({
				url: '/pages/user/contract/viewContract?orderId='+oid
			  });
			  break;
			default:
			  console.warn('Unknown page:', page);
		  }
		}
	}
};
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	.order-list {
		flex: 1;
		width: 95%;
		padding: 10px;
	}
	.loading, .empty {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 40rpx 0;
	}
	
	.empty image {
	  width: 200rpx;
	  height: 200rpx;
	  margin-bottom: 20rpx;
	  opacity: 0.6;
	}
	
	.empty text {
	  color: #999;
	  font-size: 28rpx;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.order-content {
		display: flex;
		justify-content: space-between;
	}

	.order-image {
		width: 120px;
		height: 80px;
		right: 12px;
		border-radius: 8px;
	}

	.order-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 10px;
	}

	.order-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.order-info {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 5px 0;
	}

	.order-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		margin-top: 5px;
	}
	.confirmed {
		color: #1989fa;
	}

	.signed {
		color: #07c160;
	}
	.paid {
		color: #ee0a24;
	}

	.ready {
		color:orange;
	}

	.completed {
		color: gray;
	}
/* 	.status-text {
		color: #007bff;
	} */

	.order-action {
		margin-right: -110px;
		font-size: 14px;
		color: #007bff;
	}

	.footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
	}

	.footer-item.active {
		color: #1989fa;
	}

	.footer-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 2px;
	}

	.footer-icon.active {
		filter: invert(45%) sepia(80%) saturate(1000%) hue-rotate(190deg) brightness(100%) contrast(95%);
	}
</style>